<template>
  <div>
    <p>今年年龄{{age}}</p>
    <p>后年年龄{{newAge}}</p>
    <!-- <button @click="btn">change</button> -->
    <!-- v-model绑定计算属性 -->
    <input type="text" v-model="newAge">
  </div>
</template>

<script>
import { ref,computed} from 'vue';
export default {
    setup() {
        const age = ref(16)
        // const newAge=computed(()=>{
        //     return age.value+2
        // })


        //计算属性高级用法
        const newAge = computed({
        //   get函数 ，获取计算属性的值
            get(){
                return age.value+2
            },
        //  set函数，当给计算属性设置值的时候触发
            set(value){
            console.log(value);
            age.value=value-2
            }
        })

            return {age,newAge }
        },

}
</script>

<style>

</style>